<template>
  <div class="select_class">
    <mt-search v-model="searchValue" style="height:auto;padding:0;">
    </mt-search>
    <mt-index-list>
      <mt-index-section class="section" v-for="site in siteData" :key=site :index="site">
        <div class="main" v-for="(item,index) in showData" @click="selectFun(item.regionId)" v-if="item.sortName==site">
          <div class="classroom">
            <div class="className">{{item.localName}}</div>
          </div>
        </div>
      </mt-index-section>
    </mt-index-list>
  </div>

</template>

<script>
    export default {
        data() {
            return {
                searchValue: '',
                serachData: [],
                showData: [],
            }
        },
        methods: {
            selectFun(id) {
                sessionStorage.setItem('selectProvince', id);
                this.$router.push({
                    'path': '/selectCity'
                })
            },
            getProvinceData() { //获取省份数据
                let params = {
                    pageNum: 1,
                    pageSize: 1000,
                    regionGrade: 1,
                }
                this.$api.post('/region/selectPage', params, data => {
                    this.serachData = this.showData = data.info.list.map(x => {
                        x.EnglishName = this.$getCase.query(x.localName);
                        return x
                    })
                }, function(data) {
                    console.log('data', data);
                })
            }
        },
        computed: {
            siteData: function() {
                var array = [];
                let AllZiMu = this.showData.map(x => { //从 showData里面提取以sortName为子对象的数组
                    return x.sortName
                })
                AllZiMu = AllZiMu.filter((element, index, self) => { //过滤相同子节点
                    return self.indexOf(element) === index;
                })
                return AllZiMu;
            }
        },
        created() {
            this.getProvinceData();
        },
        watch: {
            searchValue(val) {
                this.showData = this.serachData.filter((element, index, self) => {
                    let needShow = false;
                    element.EnglishName.map(x => {
                        if (x.indexOf(val.toUpperCase()) != -1) { //遍历缩略首字母
                            needShow = true;
                        }
                    })
                    return element.localName.indexOf(val) != -1 || needShow //如果是全拼的也匹配成功
                })
            },
            $route(to, from) {
                console.log(to, from)
            }
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>